<template>
	<view class="creatorHub">
		<view>
			<h2>订阅方案</h2>
		</view>
		<view style="margin: 20rpx 0;">
			<picker style="color: #ddd;padding: 10rpx;border-radius: 10rpx;width: 200rpx;color:#999;" mode="selector"
				:range="visitNames" :value="selectedVisitIndex" @change="handleVisitChange">
				<view style="display: flex;align-items: center;">{{visitList[selectedVisitIndex].text}}
					<u-icon style="margin-left: 15rpx;" name="arrow-down" size="18" color="#666"></u-icon>
				</view>
			</picker>
		</view>
		<view v-for="(plan, index) in plans" :key="index">
			<plan :index="index" @remove="removePlan"></plan>
		</view>
		<view>
			<button style="background: #fff;color: #999;" @click="addPlan">增加订阅方案</button>
		</view>
		<view>
			<view style="font-size: 39rpx;font-weight: 550;margin: 30rpx auto;">自选金融赞助</view>
			<u-radio-group v-model="radioValue">
				<u-radio size="28" iconSize='23' activeColor="red" shape="circle" label="置底" :name="1"></u-radio>
				<u-radio size="28" style="margin:0 10rpx;" iconSize='23' activeColor="red" shape="circle" label="置顶"
					:name="2"></u-radio>
				<u-radio size="28" iconSize='23' activeColor="red" shape="circle" label="隐藏" :name="3"></u-radio>
			</u-radio-group>
			<view>
				<textarea placeholder-style="color:#999;padding:15rpx;" style="width: 100%;height: 180rpx;border: 1px #ddd solid;margin: 30rpx auto;"
					placeholder="自选金额方案的文案"></textarea>
			</view>
			<view style="width: 100%;text-align: right;">
				<button class="save" style="">保存</button>
			</view>
		</view>
		<view class="sponsor">
			<text style="font-weight: 550;font-size: 39rpx;">赞助折扣</text>
			<text style="margin: 30rpx 0;">赞助折扣能吸引粉丝长期赞助</text>
			<text style="color: #999;">注:</text>
			<text style="color: #999;">
				1.打折后，创作者收到的赞助金为折扣价
			</text>
			<text style="color: #999;">
				2.平台手续费将在折后价的基础上收取%
			</text>
		</view>
		<view>
			<view>
				<u-radio-group placement="column" v-model='radioName'>
					<u-radio size="28" iconSize='23'
						style="background-color: #fff;border: 1.5px #ddd solid;padding: 26rpx;" activeColor="red"
						:name="1" shape="circle">
						<text style="margin-left: 20rpx;font-size: 39rpx;font-weight: bold;">关闭折扣</text>
					</u-radio>
					<view style="margin: 30rpx 0;background-color: #fff;border: 1.5px #ddd solid;padding: 26rpx;">
						<u-radio size="28" iconSize='23' activeColor="red" :name="2" shape="circle">
							<view style="width: 100%;margin:20rpx;margin-top: 0;">
								<text style="font-size: 39rpx;font-weight: bold;">打开推荐折扣</text><br />
							</view>
						</u-radio>
						<view style="display: flex;flex-direction: column;text-indent: 2.9em;">
							<text>6-11个月 折扣6%</text>
							<text>1年-23个月 折扣10%</text>
							<text>2-35个月 折扣14%</text>
							<text>3年 折扣16%</text>
						</view>
					</view>
				</u-radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedVisitIndex: 0, // 默认选中第一个
				radioValue: 1,
				radioName: 1,
				plans: [{}], // 用于存储子组件的状态
				visitList: [{
						text: '全部'
					},
					{
						text: '已上架'
					},
					{
						text: '已隐藏'
					}
				],
			}
		},
		computed: {
			// 计算属性用于获取visitList中的text数组
			visitNames() {
				return this.visitList.map(item => item.text);
			}
		},
		methods: {
			// 处理选择器变化的方法
			handleVisitChange(event) {
				this.selectedVisitIndex = event.target.value;
			},
			addPlan() {
				this.plans.push({}); // 添加新的子组件实例到列表中
			},
			removePlan(index) {
				this.plans.splice(index, 1); // 移除指定的子组件
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.creatorHub {
		width: 90%;
		margin: auto;
	}

	button {
		background-color: #ff6600;
		color: #fffddd;
	}

	.save {
		width: 200rpx;
		height: 75rpx;
		line-height: 75rpx;
		display: inline-block;
	}

	.sponsor {
		display: flex;
		flex-direction: column;
		margin: 30rpx auto;
	}
</style>